<template>
	<div class="app-msg">
		<el-form :model="formData" :rules="rules" ref="form" label-width="auto">
			<el-form-item label="标题" prop="title">
				<el-input v-model="formData.title"></el-input>
			</el-form-item>
			<el-form-item label="内容" prop="content">
				<el-input type="textarea" v-model="formData.content"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="sendNotice('form')">发布</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	name: "app-msg",

	data() {
		return {
			formData: {
				title: "",
				content: ""
			},
			rules: {
				title: [
					{ required: true, message: "请输入标题", trigger: "blur" },
					{ min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur" }
				],
				content: [{ required: true, message: "请填写公告内容", trigger: "blur" }]
			}
		};
	},

	methods: {
		sendNotice(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.$service.app.msg
						.send({
							title: this.formData.title,
							content: this.formData.content
						})
						.then(() => {
							this.$message.success(`发布成功`);
							this.$refs[formName].resetFields();
						})
						.catch((err) => {
							this.$message.error(err);
						});
				}
			});
		}
	}
};
</script>
